<template>
	<div class="my-container">
		<!-- 未登录 -->
		<div v-if="!store.state.userInfo.wechat_id">
			<fui-avatar class="photo" @click="goLogin">
				<fui-icon class="photo-icon" name="my-fill" color="#fff"></fui-icon>
			</fui-avatar>
			<div class="text-name">未登录</div>
		</div>
		<!-- 已登录 -->
		<div v-else>
			<fui-avatar :src="defaultAvatar" class="photo" @click="goOut">
			</fui-avatar>
			<div class="text-name">{{ store.state.userInfo.mem_Name }}</div>
		</div>
		<fui-modal :buttons="buttons" :show="sheetShow" @click="sheetEvent" title="提示" descr="此操作将退出登录"></fui-modal>
		<fui-modal :buttons="buttons" :show="cacheShow" @click="cacheEvent" title="提示" descr="清除缓存后需要重新登录"></fui-modal>
		<fui-toast ref="toastRef"></fui-toast>


	</div>
	<div class="my_func">
		<fui-card :margin="['25rpx', '25rpx']">
			<fui-grid :columns="4">
				<fui-grid-item :index="index" @click="gridEvent" v-for="(item,index) in gridList" :key="index">
					<template v-slot>
						<div class="gird_container">
							<img class="grid_img" :src="item.img">
							<span class="grid_text">{{item.name}}</span>
						</div>
					</template>
				</fui-grid-item>
			</fui-grid>
		</fui-card>
		<fui-card :margin="['25rpx', '25rpx']">
			<fui-list>
				<fui-list-cell open-type="contact" @click="cellEvent" :index="index" arrow
					v-for="(item,index) in cellList" :key="index">
					<template v-slot style="width: 100%;">
						<button class="btns" plain open-type="contact" v-if="item.name == '在线客服'">
							<img class="cellImg" :src="item.img">
							<text class="cell_text">{{item.name}}</text>
						</button>
						<div v-else>
							<img class="cellImg" :src="item.img">
							<text class="cell_text">{{item.name}}</text>
						</div>
					</template>
				</fui-list-cell>
			</fui-list>
		</fui-card>
		<fui-toast ref="msgRef"></fui-toast>
	</div>
</template>

<script setup>
	import {
		onShow,
		onHide,
		onLoad,
	} from "@dcloudio/uni-app"
	import {
		getCurrentInstance,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import {
		defaultAvatar
	} from '../../config/index.js'
	import {
		loginApi,
		wzLoginApi
	} from '../../api/index.js'
	import {
		ref
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	const store = useStore()

	// cell
	const cellList = ref([{
			img: '../../static/images/my/mz.png',
			name: '免责声明'
		},
		{
			img: '../../static/images/my/lx.png',
			name: '联系博主'
		},
		{
			img: '../../static/images/my/kf.png',
			name: '在线客服'
		},
		{
			img: '../../static/images/my/yj.png',
			name: '意见反馈'
		},
		{
			img: '../../static/images/my/qc.png',
			name: '清除缓存'
		}
	])
	const cellEvent = ({
		index
	}) => {
		console.log(index)
		switch (index) {
			case 0:
				uni.navigateTo({
					url: `/pages/cisclaimer/index`
				});
				break
			case 1:
				uni.navigateTo({
					url: `/pages/contact/index`
				});
				break
			case 2:
				console.log('在线客服')
				break
			case 3:
				console.log('意见反馈')
				showMsg()
				break
			case 4:
				console.log('清除缓存')
				cacheShow.value = true
				break
		}
	}



	// grid
	const gridList = ref([{
			name: '文章归档',
			img: '../../static/images/my/gd.png'
		},
		{
			name: '恋爱日记',
			img: '../../static/images/my/la.png'
		},
		{
			name: '个人日记',
			img: '../../static/images/my/rj.png'
		},
		{
			name: '留言板',
			img: '../../static/images/my/ly.png'
		}
	])
	const gridEvent = ({
		detail
	}) => {
		showMsg()
		switch (detail.index) {
			case 0:
				console.log('文章归档')
				break
			case 1:
				console.log('恋爱日记')
				break
			case 2:
				console.log('个人日记')
				break
			case 3:
				console.log('留言板')
				break
		}
	}

	//  获取code
	const goLogin = () => {
		uni.login({
			provider: 'weixin',
			success: async (res) => {
				// res.code 即为获取到的 code
				const {
					data
				} = await loginApi(proxy, {
					code: res.code
				})
				if (data?.code == 200) {
					// 登录成功
					const {
						openid,
						session_key
					} = data.data
					const res1 = await wzLoginApi(proxy, {
						openid
					})
					if (res1.data?.code == 200) {
						store.commit('changeUserInfo', res1.data.data[0])
					}
				}
			}
		});
	}
	// 退出
	const buttons = ref([{
		text: '取消',
		color: '#ff2b2b',
		background: '#ff2b2b',
		plain: true
	}, {
		text: '确定',
		color: '#fff',
		background: '#ff2b2b',
		plain: false
	}])


	// 退出登录
	let sheetShow = ref(false)
	const goOut = () => {
		sheetShow.value = true
	}
	const sheetEvent = (item) => {
		switch (item.index) {
			case 0:
				sheetShow.value = false
				break
			case 1:
				// 退出登录
				store.commit('changeUserInfo', {})
				uni.clearStorageSync();
				sheetShow.value = false
				break
		}
	}

	// 清除缓存
	let cacheShow = ref(false)
	const cacheEvent = (item) => {
		switch (item.index) {
			case 0:
				cacheShow.value = false
				break
			case 1:
				// 清除缓存
				store.commit('changeUserInfo', {})
				uni.clearStorageSync();
				cacheShow.value = false
				setTimeout(() => {
					showMsg('清除成功')
				}, 500)
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/my/index",
					})
				}, 1000)
				break
		}
	}



	// 正在开发
	const msgRef = ref(null)
	const showMsg = (text = '还在开发中！') => {
		msgRef.value.show({
			text,
		})
	}
</script>

<style lang="scss" scoped>
	.my_func {
		width: 100%;
		height: calc(100vh - 500rpx);

		.cellImg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 15rpx;
			line-height: 32rpx;
			vertical-align: text-bottom;
		}

		.btns {
			border: unset;
			font-size: 16px;
			height: 32.5rpx;
			display: flex;
			align-items: center;
			padding: 0;
			width: 100%;
			height: 32rpx;
		}

		.cell_text {
			font-size: 16px;
			font-weight: 400
		}
	}

	.my-container {
		height: 500rpx;
		background: url('https://www.cat61.com/img/xcx/my_bg.png') no-repeat;
		background-size: 100% 100%;
		position: relative;

		.text-name {
			color: #333;
			text-align: center;
			padding-top: 410rpx;
		}

		.photo {
			width: 200rpx !important;
			height: 200rpx !important;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 105rpx;
			left: calc(50% - 100rpx);

			:deep(.fui-avatar__size-middle) {
				width: 170rpx !important;
				height: 170rpx !important;
			}

			.photo-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				width: 80%;
				height: 80%;

				:deep(.fui-icon) {
					font-size: 100rpx !important;
				}
			}
		}

	}

	.gird_container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.grid_img {
			width: 48rpx;
			height: 48rpx;
		}

		.grid_text {
			margin-top: 15rpx;
			font-size: 26rpx;
		}
	}
</style>
